<template>
    <div class="home" style="height:100%">
        <el-header style="text-align: right; font-size: 12px;height:80px;" ref="header">
        <span class="span1"></span>
        <span class="span2">妖精的口袋</span>
        <el-dropdown>
            <i
            class="el-icon-setting"
            style="margin-right:20px;color:white;line-height:80px;font-size:20px;"
            ></i>
            <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item>新增</el-dropdown-item>
            <el-dropdown-item>
                <div @click="loginout">退出登录</div>
            </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <span>
            <img class="userImg" :src="userInfo.userImg" alt="">
            <span>{{userInfo.userName}}</span>
        </span>
        </el-header>
        <el-container class="scroll" style="height:800px;">
        <el-aside width="200px" style="background-color:#ffc0cb2b;">
            <el-menu :default-active="activeIndex" @select="handleSelect">
            <template
                v-for="(item,index) in $router.options.routes.slice(3,$router.options.routes.length)"
            >
                <el-menu-item :index="item.children[0].name" v-if="item.leaf">{{item.children[0].text}}</el-menu-item>
                <el-submenu :index="index+1+''" v-else>
                <template slot="title">
                    <i :class="item.icon"></i>
                    {{item.text}}
                </template>
                <el-menu-item :index="term.name" v-for="term in item.children" :key="term.name">
                    <i :class="term.icon"></i>
                    {{term.text}}
                </el-menu-item>
                </el-submenu>
            </template>
            </el-menu>
        </el-aside>
        <el-container>
            <router-view></router-view>
        </el-container>
        </el-container>
    </div>
    </template>
    <script>
    export default {
        name: "home",
        data() {
            return {
                activeIndex: "1",
                userInfo:{}
            };
        },
        mounted(){
            this.userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"))
        },
        mpunted() {
            this.$refs.header.$el.style.background = window.localStrage.getItem(
            "color"
            );
            console.log(this.$router.options.routes);
        },
        methods: {
            loginout() {
            window.localStorage.removeItem("user")
            this.$router.replace({
                name: "login"
            });
            },
            handleSelect(key, keyPath) {
            console.log(key, keyPath);
            this.$router.push({ name: key });
            }
        },
    };
    </script>
    <style lang="scss" scoped="scoped">
    .home {
    width: 100%;
    height: 100%;
    .el-header {
        background-color: pink;
        color: #333;
        .span1 {
        display: inline-block;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 1px solid #fff;
        float: left;
        vertical-align: middle;
        margin-top: 10px;
        background: url("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1427040194,4046161619&fm=26&gp=0.jpg") no-repeat;
        background-size: cover;
        }
        .span2 {
            float: left;
            font-size: 26px;
            font-weight: bold;
            color:#fff;
            padding-top:5px;
            margin-left: 10px;
            line-height: 70px;
        }
    }
    }
    .el-aside {
    color: #333;
    }
    .items {
    width: 200px;
    overflow: hidden;
    }
    .items .item {
    width: 25px;
    height: 25px;
    margin: 5px;
    box-sizing: border-box;
    float: left;
}
.userImg{
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 70px;
    vertical-align: middle;
    margin-right: 10px;
    border-radius: 50%;
    border: 1px solid #fff;
}
</style>